<template>
	<view>
		<cu-custom :isBack="true" bgColor="bg-blue">
			<block slot="content">实时质量监控</block>
			<template slot="backText">
				<text class="cuIcon-back" @tap="beforePage"></text>
			</template>
		</cu-custom>
		<!-- 主题内容 -->
		<view  class="padding-t">
			<view class="public-main-info">
				<view class="u-main">
					<!-- 容器 -->
					<view class="padding2030">
						<scroll-view scroll-y="true" :style="{height: uHeight + 'px'}" @scrolltolower="lower">
							<!-- 每一列 -->
							<view class="dashed-bottom padding-tb-sm" v-for="(item, index) in list" :key="index">
								<!-- 头部 -->
								<view class="order-info-header flex justify-between align-center" @tap="findPlanNo(item.coilNo)">
									<view class="">
										<text class="u-font-weight6 font-size24 u-font-weight">钢卷号</text>
										<text class="margin-left-10 font-size36">{{item.coilNo}}</text>
									</view>
									<text class="cuIcon-right text-blue"></text>
								</view>
								<view class="flex order-info-list">
									<view class="basic-default">
										<text class="margin-right-10 u-font-weight6">钢卷类型</text>
										<text class="u-font-weight">{{item.type}}</text>
									</view>
									<view class="basic-default">
										<text class="margin-right-10 u-font-weight6">钢种</text>
										<text class="u-font-weight">{{item.steelType}}</text>
									</view>
									<view class="basis-sm">
										<text class="margin-right-10 u-font-weight6">钢卷状态</text>
										<text class="u-font-weight">{{item.state}}</text>
									</view>
								</view>
								<view class="flex padding-tb-20">
									<view class="" style="width: 25%;">
										<view class="font-size28 u-font-weight">精轧厚度</view>
										<view class="">
											<view class="order-info-list u-font-weight">{{item.fmThickness}}</view>
											<view class="u-font-weight6">目标值(mm)</view>
										</view>
										<view class="">
											<view class="order-info-list u-font-weight">{{item.fmThicknessRate}}</view>
											<view class="u-font-weight6">命中率(%)</view>
										</view>
									</view>
									<view class="" style="width: 25%;">
										<view class="font-size28 u-font-weight">精轧宽度</view>
										<view class="">
											<view class="order-info-list u-font-weight">{{item.fmWidth}}</view>
											<view class="u-font-weight6">目标值(mm)</view>
										</view>
										<view class="">
											<view class="order-info-list u-font-weight">{{item.fmWidthRate}}</view>
											<view class="u-font-weight6">命中率(%)</view>
										</view>
									</view>
									<view class="" style="width: 25%;">
										<view class="font-size28 u-font-weight">精轧平直</view>
										<view class="">
											<view class="order-info-list u-font-weight">{{item.fmFlatness}}</view>
											<view class="u-font-weight6">目标值(IU)</view>
										</view>
										<view class="">
											<view class="order-info-list u-font-weight">{{item.fmFlatnessRate}}</view>
											<view class="u-font-weight6">命中率(%)</view>
										</view>
									</view>
									<view class="" style="width: 25%;">
										<view class="font-size28 u-font-weight">精轧凸度</view>
										<view class="">
											<view class="order-info-list u-font-weight">{{item.fmConvexity}}</view>
											<view class="u-font-weight6">目标值(mm)</view>
										</view>
										<view class="">
											<view class="order-info-list u-font-weight">{{item.fmConvexityRate}}</view>
											<view class="u-font-weight6">命中率(%)</view>
										</view>
									</view>
								</view>
								<view class="flex">
									<view class="" style="width: 25%;">
										<view class="font-size28 u-font-weight">精轧楔形</view>
										<view class="">
											<view class="order-info-list u-font-weight">{{item.fmWedge}}</view>
											<view class="u-font-weight6">目标值(mm)</view>
										</view>
										<view class="">
											<view class="order-info-list u-font-weight">{{item.fmWedgeRate}}</view>
											<view class="u-font-weight6">命中率(%)</view>
										</view>
									</view>
									<view class="" style="width: 25%;">
										<view class="font-size28 u-font-weight">精轧温度</view>
										<view class="">
											<view class="order-info-list u-font-weight">{{item.fmTemp}}</view>
											<view class="u-font-weight6">目标值(℃)</view>
										</view>
										<view class="">
											<view class="order-info-list u-font-weight">{{item.fmTempRate}}</view>
											<view class="u-font-weight6">命中率(%)</view>
										</view>
									</view>
									<view class="" style="width: 25%;">
										<view class="font-size28 u-font-weight">卷取温度</view>
										<view class="">
											<view class="order-info-list u-font-weight">{{item.dcTemp}}</view>
											<view class="u-font-weight6">目标值(℃)</view>
										</view>
										<view class="">
											<view class="order-info-list u-font-weight">{{item.dcTempRate}}</view>
											<view class="u-font-weight6">命中率(%)</view>
										</view>
									</view>
									<view class="" style="width: 25%;">
										<view class="font-size28 u-font-weight">轧制完成时间</view>
										<view class="">
											<text class="order-info-list u-font-weight">{{item.completeTime}}</text>
										</view>
									</view>
								</view>
							</view>
							<view class="text-center" v-show="flag">
								{{info}}
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-tabbar-height"></view>
	</view>
</template>

<script>
	import { post } from "@/lib/Util.js";
	import {GET_QUALITY_REALTIME} from '@/common/api/quality.js'
	export default {
		data() {
			return {
				pageIndex: 1,
				pageSize: 10,
				list: [],
				info: '正在加载……',
				flag: false,
				uHeight: 0
			}
		},
		mounted() {
			this.pageIndex = 1
			this.getInfo()
			var len = 0
			uni.getSystemInfo({
				success: function (res) {
					console.log(res.windowHeight)
					len = res.windowHeight
				}
			})
			this.uHeight = len - this.CustomBar - 40 - 54 - 10
		},
		methods: {
			beforePage() {
				uni.navigateBack({
					delta: 1
				});
			},
			findPlanNo(val) {
				uni.navigateTo({
					url: '/pages/modules/quality/real/detail?param=' + val
				})
			},
			async getInfo() {
				let res = await post(GET_QUALITY_REALTIME, {
					page: this.pageIndex,
					size: this.pageSize
				})
				if(res.code == 0) {
					if(res.data.length == 0) {
						this.info = '已经到底了'
					}else {
						this.list = this.list.concat(res.data)
						this.flag = false
					}
					if(this.list.length == 0) {
						this.info = '暂无数据'
					}
				}
			},
			lower(e) {
				if (e.target.direction == "bottom") {
					this.flag = true
					this.info = '加载中……'
					++this.pageIndex
					this.getInfo()
				}
			}
		}
	}
</script>

<style>
	
</style>
